CSS-i supervõimete avamine: sügav sukeldumine @function reeglisse

Aastaid on CSS olnud veebistiili alustala, arenenud lihtsast värvide ja fontide keelest keerukaks süsteemiks, mis on võimeline looma kompleksseid paigutusi ja animatsioone. Kuid veebirakenduste keerukuse kasvades pöördusid arendajad sageli eelprotsessorite, nagu Sass ja Less, poole, et lisada programmeerimislaadset loogikat, näiteks muutujaid, mixiine ja, mis kõige tähtsam, funktsioone. Need tööriistad täitsid kriitilise lünga, võimaldades luua hooldatavamaid, skaleeritavamaid ja DRY (Ära Korda Ennast) stiililehti. Aga mis siis, kui CSS saaks seda teha otse? Siin tulebki mängu CSS @function reegel.

@function at-reegel on tulevikku vaatav ettepanek, mis on valmis muutma seda, kuidas me CSS-i kirjutame. See on osa laiemast CSS Houdini algatusest, mis on kogum API-sid, mille eesmärk on anda arendajatele madalama taseme juurdepääs brauseri stiili- ja paigutusmootorile. @function reegliga on unistus taaskasutatavate, parameetripõhiste funktsioonide defineerimisest otse .css failis muutumas reaalsuseks, vähendades potentsiaalselt meie sõltuvust välistest ehitustööriistadest paljude tavaliste ülesannete jaoks.

See põhjalik juhend uurib CSS-i @function reeglit algusest peale. Me süveneme selle süntaksisse, mõistame, kuidas defineerida parameetreid, uurime praktilisi kasutusjuhtumeid ning arutame selle praegust staatust ja tulevasi mõjusid veebiarendusele kogu maailmas.

Mis on CSS @function reegel?

Oma olemuselt võimaldab CSS-i @function at-reegel arendajatel defineerida kohandatud funktsiooni, mida saab kutsuda kogu stiililehe ulatuses. Erinevalt CSS-i kohandatud omadustest (muutujatest), mis salvestavad staatilisi väärtusi, saab kohandatud funktsioon võtta sisendparameetreid, sooritada arvutusi või manipulatsioone ja tagastada dünaamilise väärtuse.

Mõelge sellest nii:

• CSS-i kohandatud omadus on nagu konstant: --primary-color: #007bff;. See hoiab väärtust.
• CSS-i kohandatud funktsioon on nagu retsept: --calculate-padding(2). See võtab koostisosa (number 2), järgib juhiseid (nt korrutab baasühikuga) ja annab teile tulemuse (nt 16px).

See võimekus viib CSS-i lähemale tõelisele programmeerimiskeelele, võimaldades keerukamat ja kapseldatud loogikat otse veebirakenduse stiilikihis. See on otse brauseris interpreteeritav lahendus probleemile, mida seni on lahendatud ainult eelprotsessoritega kompileerimisaegses ehitusetapis.

Lünga ületamine: @function vs. eelprotsessori funktsioonid

Kui teil on kogemusi Sassiga, tundub @function kontseptsioon märkimisväärselt tuttav. Sassis võiksite kirjutada funktsiooni nii:

Sassi näide:

            @function spacing($multiplier) {
  @return $multiplier * 8px;
}

.element {
  padding: spacing(2); // Kompileerub kui padding: 16px;
}
            

              
                Copy
              
            
          

Kavandatav otse CSS-is töötav @function püüab saavutada sama tulemuse, kuid olulise erinevusega: see töötab brauseris. Sellel eristusel on sügavad tagajärjed:

• Ehitusetappi pole vaja: Saate neid funktsioone kirjutada ja kasutada otse oma CSS-failis, ilma et oleks vaja kompilaatorit nagu Sass või komplekteerijat nagu Webpack nende töötlemiseks. See lihtsustab arenduse töövooge, eriti väiksemate projektide või arendajate jaoks, kes eelistavad otsesemat lähenemist.
• Dünaamiline ja kontekstiteadlik: Kuna brauser neid interpreteerib, saavad need funktsioonid potentsiaalselt suhelda teiste reaalajas CSS-i väärtuste ja omadustega, sealhulgas CSS-i kohandatud omadustega, mis võivad käitusajal muutuda (nt JavaScripti kaudu). Eelprotsessori funktsioonil on juurdepääs ainult kompileerimise ajal teadaolevatele väärtustele.
• Standardiseerimine: See pakub ülemaailmselt standardiseeritud viisi funktsioonide loomiseks, tagades, et stiililehed on kaasaskantavamad ja koostalitlusvõimelisemad erinevate projektide ja arenduskeskkondade vahel.

Siiski on oluline märkida, et eelprotsessorid pakuvad praegu palju rikkalikumat funktsioonide komplekti, sealhulgas keerulist kontrollvoogu (if/else avaldised, tsüklid) ja suurt hulka sisseehitatud funktsioone. CSS-i otse kasutatav @function alustab põhitõdedest, keskendudes arvutustele ja väärtuste teisendamisele.

CSS-i funktsiooni anatoomia: süntaks ja parameetrid

Süntaksi mõistmine on esimene samm @function reegli valdamiseks. Struktuur on loodud olema intuitiivne ja kooskõlas teiste kaasaegsete CSS-i funktsioonidega.

            @function --my-function-name(<parameter-1>, <parameter-2>, ...) {
  /* ... funktsiooni loogika ... */
  return <some-value>;
}
            

              
                Copy
              
            
          

Vaatame iga komponenti lähemalt.

Funktsiooni nimetamine

Kohandatud funktsioonide nimed peavad algama kahe kriipsuga (--), täpselt nagu CSS-i kohandatud omadused. See konventsioon tagab selge ja järjepideva nimeruumi autori defineeritud konstruktsioonidele, vältides konflikte tulevaste CSS-i enda funktsioonidega. Näiteks --calculate-fluid-size või --to-rem on kehtivad nimed.

Parameetrite defineerimine

Parameetrid on teie funktsiooni sisendid. Need defineeritakse sulgudes () funktsiooni nime järel. Saate määrata ühe või mitu komadega eraldatud parameetrit.

Vaikimisi väärtused: Parameetritele saab anda vaikimisi väärtusi, muutes need valikuliseks. Selleks järgneb parameetri nimele koolon ja vaikimisi väärtus.

            /* Funktsioon valikulise parameetriga */
@function --adjust-opacity(<color>, <amount>: 0.8) {
  return color-mix(in srgb, <color>, transparent calc(100% * (1 - <amount>)));
}
            

              
                Copy
              
            
          

Selles näites, kui --adjust-opacity() kutsutakse välja ainult ühe argumendiga (värviga), seatakse <amount> automaatselt väärtusele 0.8.

Funktsiooni keha

Funktsiooni keha, mis on ümbritsetud loogeliste sulgudega {}, sisaldab loogikat. Siin teostate arvutusi ja manipuleerite sisendparameetritega. Soovitud väljundi loomiseks saate kehas kasutada standardseid CSS-i funktsioone nagu calc(), min(), max(), clamp() ja color-mix().

Kuigi esialgne spetsifikatsioon keskendub väärtuste arvutamisele, võimaldab infrastruktuur tulevasi täiustusi, potentsiaalselt ka keerukamat loogikat, kui CSS-i keel areneb.

Tagastusväärtus

Iga funktsioon peab lõppema return käsuga. See käsk määrab väärtuse, mille funktsioon väljastab, kui seda kutsutakse. Tagastatud väärtust kasutatakse seejärel CSS-i omaduses, kus funktsiooni kasutati. Funktsioon ilma return käsuta on kehtetu.

Praktilised kasutusjuhud ja näited

Teooria on tore, kuid @function reegli tõeline jõud avaldub praktilises rakenduses. Uurime mõningaid reaalseid stsenaariume, kus kohandatud funktsioonid võivad teie stiililehti drastiliselt parandada.

Kasutusjuht 1: Sujuv tüpograafia ja suuruse määramine

Reageeriv tüpograafia hõlmab sageli keerukaid clamp() funktsioone, et tagada teksti sujuv skaleerimine erinevate vaateakna suuruste vahel. See võib viia korduva ja raskesti loetava koodini.

Enne (korduv clamp()):

            h1 {
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}

h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

p {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}
            

              
                Copy
              
            
          

See on sõnaohter ja vigadele aldis. @function abil saame selle loogika abstraheerida puhtaks, taaskasutatavaks utiliidiks.

Pärast (kasutades kohandatud funktsiooni):

            /* Defineerime sujuva suuruse funktsiooni */
@function --fluid-size(<min-size>, <max-size>, <min-viewport>: 320px, <max-viewport>: 1200px) {
  /* Arvutame clamp-valemi muutuva osa */
  --variable-part: (<max-size> - <min-size>) / (<max-viewport> - <min-viewport>);

  return clamp(
    <min-size>,
    calc(<min-size> + 100vw * var(--variable-part)),
    <max-size>
  );
}

/* Kasutame funktsiooni */
h1 {
  font-size: --fluid-size(2rem, 4rem);
}

h2 {
  font-size: --fluid-size(1.5rem, 3rem);
}

p {
  font-size: --fluid-size(1rem, 1.25rem);
}
            

              
                Copy
              
            
          

Tulemus on palju deklaratiivsem ja hooldatavam. Keeruline arvutus on kapseldatud funktsiooni sisse ja arendaja peab esitama ainult minimaalse ja maksimaalse soovitud suuruse.

Kasutusjuht 2: Täiustatud värvide manipuleerimine

Eelprotsessorite kasutajad armastavad funktsioone nagu lighten(), darken() ja saturate(). CSS-i enda color-mix() funktsiooniga saame luua oma versioonid.

Tooni (tint) ja varju (shade) funktsioonide loomine:

            /* 
  Loob värvist heledama versiooni (tooni).
  <base-color>: Algvärv.
  <weight>: Protsent 0% kuni 100%, mis näitab, kui palju valget sisse segada.
*/
@function --tint(<base-color>, <weight>) {
  return color-mix(in srgb, <base-color>, white <weight>);
}

/*
  Loob värvist tumedama versiooni (varju).
  <base-color>: Algvärv.
  <weight>: Protsent 0% kuni 100%, mis näitab, kui palju musta sisse segada.
*/
@function --shade(<base-color>, <weight>) {
  return color-mix(in srgb, <base-color>, black <weight>);
}

:root {
  --brand-primary: #007bff;
}

.button-primary {
  background-color: var(--brand-primary);
  border-color: --shade(var(--brand-primary), 20%);
}

.button-primary:hover {
  background-color: --tint(var(--brand-primary), 15%);
}
            

              
                Copy
              
            
          

See lähenemine tagab järjepideva ja süstemaatilise viisi värvivariatsioonide loomiseks kogu rakenduses, muutes teemade loomise oluliselt lihtsamaks ja robustsemaks.

Kasutusjuht 3: Vahede skaala jõustamine

Disainisüsteemid tuginevad järjepidevale vahekaugusele, et luua harmoonilisi ja prognoositavaid kasutajaliideseid. Funktsioon saab jõustada vahede skaala, mis põhineb ühel baasühikul.

            :root {
  --base-spacing-unit: 8px;
}

/*
  Arvutab vahekauguse väärtuse kordaja alusel.
  --spacing(1) -> 8px
  --spacing(2) -> 16px
  --spacing(0.5) -> 4px
*/
@function --spacing(<multiplier>) {
  return calc(<multiplier> * var(--base-spacing-unit));
}

.card {
  padding: --spacing(3); /* 24px */
  margin-bottom: --spacing(2); /* 16px */
}

.container {
  padding-left: --spacing(2.5); /* 20px */
  padding-right: --spacing(2.5); /* 20px */
}
            

              
                Copy
              
            
          

See tagab, et kõik rakenduse vahed vastavad defineeritud disainisüsteemile. Kui baasühikut on vaja muuta, tuleb seda uuendada ainult ühes kohas (--base-spacing-unit muutujas) ja kogu skaala uueneb automaatselt.

Kuidas oma kohandatud funktsiooni kasutada

Kui olete funktsiooni @function abil defineerinud, on selle kasutamine sama lihtne kui CSS-i enda funktsiooni, näiteks rgb() või calc(), kutsumine. Kasutate funktsiooni nime, millele järgnevad sulud argumentidega.

            /* Defineerige funktsioonid oma stiililehe ülaosas */
@function --to-rem(<px-value>, <base>: 16) {
  return calc(<px-value> / <base> * 1rem);
}

@function --shade(<color>, <weight>) {
  return color-mix(in srgb, <color>, black <weight>);
}

/* Kasutage neid oma reeglites */
body {
  font-size: --to-rem(16);
}

.title {
  font-size: --to-rem(48);
  border-bottom: 1px solid --shade(#cccccc, 10%);
}
            

              
                Copy
              
            
          

Üks võimsamaid aspekte on võime neid kutseid pesastada ja kombineerida teiste CSS-i funktsioonidega, näiteks kohandatud omadustega, maksimaalse paindlikkuse saavutamiseks.

            :root {
  --base-font-size-px: 18;
  --primary-theme-color: #5b21b6;
}

body {
  font-size: --to-rem(var(--base-font-size-px));
  color: --shade(var(--primary-theme-color), 25%);
}
            

              
                Copy
              
            
          

Praegune staatus: brauseritugi ja tee edasi

See on kriitiline punkt kõigile arendajatele: Selle kirjutamise hetkel on CSS-i @function reegel eksperimentaalne funktsioon ja ei ole veel toetatud ühegi suurema brauseri stabiilses versioonis. See on osa "CSS Functions and Values API Level 1" spetsifikatsiooni tööversioonist, mis tähendab, et selle süntaks ja käitumine võivad veel muutuda.

Selle arengut saate jälgida platvormidel nagu Can I use... ja MDN Web Docs. Mõned funktsioonid võivad olla saadaval eksperimentaalsete lippude taga öistes brauseriversioonides (nagu Chrome Canary või Firefox Nightly). Tootmiskeskkondades ei ole see veel kasutusvalmis.

Miks siis sellest praegu õppida? CSS-i suuna mõistmine aitab mitmel viisil:

• Oskuste tulevikukindlaks muutmine: Teadmine, mis on tulekul, võimaldab teil planeerida tulevasi projekte ja mõista veebistandardite pikaajalist trajektoori.
• Tööriistavalikute teavitamine: Lõpuks saabuvate otse CSS-is töötavate funktsioonide tulek võib mõjutada teie tööriistade valikut. Projektid, mis vajavad ainult lihtsaid funktsioone, võivad tulevikus täielikult loobuda eelprotsessorist.
• Kogukonna panus: Arendajad saavad nende funktsioonidega eksperimenteerida ja anda väärtuslikku tagasisidet brauseritootjatele ja standardiorganisatsioonidele, aidates kujundada lõplikku implementatsiooni.

Vahepeal võivad PostCSS-i ökosüsteemis tekkida tööriistad, mis teisendavad @function süntaksi laiemalt toetatud vormingusse, võimaldades teil juba täna kirjutada tulevikukindlat CSS-i.

Potentsiaal ja tulevased mõjud

@function reegli kasutuselevõtt on midagi enamat kui lihtsalt uus süntaksitükk; see esindab CSS-i filosoofilist nihet. See on samm võimsama ja iseseisvama keele suunas, mis suudab hakkama saada ülesannetega, mis on varem delegeeritud teistele tööriistadele.

Täiustatud CSS-i demokratiseerimine

Eemaldades vajaduse keeruka JavaScriptipõhise ehituskeskkonna järele, alandavad otse CSS-is töötavad funktsioonid sisenemisläve keeruka, hooldatava ja skaleeritava CSS-i kirjutamiseks. See annab arendajatele, kes töötavad laia valiku projektidega, alates lihtsatest staatilistest veebisaitidest kuni suuremahuliste rakendusteni, võimaluse kasutada kaasaegseid tehnikaid ilma eelprotsessori lisakoormuseta.

Koostalitlusvõime Houdini API-dega

@function on vaid üks osa Houdini puslest. Tulevikus võib see sujuvalt integreeruda teiste Houdini API-dega. Kujutage ette funktsiooni, mis arvutab väärtuse, mida Paint API kasutab otse kohandatud tausta joonistamiseks, või funktsiooni, mis teavitab Layout API-d uudse paigutuse loomisest, reageerides dünaamiliselt DOM-i või vaateakna muutustele.

Uus ajastu CSS-i arhitektuuris

Funktsioonid võimaldavad uusi mustreid stiililehtede arhitektuuriks. Saame luua utiliidipõhiseid funktsiooniteeke (nt --text-color-contrast(), --calculate-aspect-ratio()), mis on projektile omased, jagatavad ja ei vaja väliseid sõltuvusi. See viib robustsemate ja isedokumenteeruvate disainisüsteemideni, mis on ehitatud otse CSS-i.

Kokkuvõte

CSS-i @function at-reegel on märgilise tähtsusega ettepanek, mis lubab tuua kauaoodatud kohandatud, parameetripõhiste funktsioonide võimsuse otse brauserisse. Võimaldades arendajatel abstraheerida keerulist loogikat, jõustada disaini järjepidevust ja kirjutada puhtamat, hooldatavamat koodi, ületab see olulise lõhe tavalise CSS-i ja eelprotsessorite võimekuse vahel.

Kuigi peame ootama laialdast brauserituge enne selle tootmises kasutamist, on tulevik, mida see esindab, helge. See tähistab dünaamilisemat, programmilisemat ja võimsamat CSS-i, mis on võimeline toime tulema kaasaegse veebiarenduse nõudmistega, ilma et peaks alati haarama välise tööriista järele. Alustage spetsifikatsiooni uurimist, hoidke silma peal brauseriuuendustel ja olge valmis kirjutama CSS-i täiesti uuel ja võimsamal viisil.